html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 4vw;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.wrapper .top_icon .left .return_back {
    width: 9vw;
    height: 9vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(96, 96, 96, 0.5);
    border-radius: 50%;

    position: fixed;
    top: 4vw;
    left: 3vw;

    z-index: 99;
}

.wrapper .top_icon .left .return_back svg {
    width: 7vw;
    height: 7vw;
}

.wrapper .top_icon .left .return_home {
    width: 9vw;
    height: 9vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(96, 96, 96, 0.5);
    border-radius: 50%;

    position: fixed;
    top: 4vw;
    left: 20vw;

    z-index: 99;
}

.wrapper .top_icon .left .return_home img {
    width: 6.5vw;
    height: 6.5vw;
}

.wrapper .top_icon .right {
    display: flex;
    align-items: center;
}

.wrapper .top_icon .right .searcch {
    width: 9vw;
    height: 9vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(96, 96, 96, 0.5);
    border-radius: 50%;

    position: fixed;
    top: 4vw;
    right: 20vw;

    z-index: 99;
}

.wrapper .top_icon .right .searcch img {
    width: 6.5vw;
    height: 6.5vw;
}

.wrapper .top_icon .right .more {
    width: 9vw;
    height: 9vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(96, 96, 96, 0.5);
    border-radius: 50%;

    position: fixed;
    top: 4vw;
    right: 5vw;

    z-index: 99;
}

.wrapper .top_icon .right .more svg {
    width: 6.5vw;
    height: 6.5vw;
}

/*  设置背景图片  */
.wrapper .background {
    width: 100%;
    height: 25vw;

    position: relative;
}

.wrapper .background img {
    width: 100vw;
    height: 30vw;
}

.wrapper .background .cloth {
    width: 14vw;
    height: 10vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(96, 96, 96, 0.4);

    position: absolute;
    bottom: -5vw;
    right: 0vw;
}

.wrapper .background .cloth img {
    width: 5vw;
    height: 5vw;
}

.wrapper .information {
    width: 100%;

    display: flex;
    align-items: center;

    margin-top: 10vw;
}

.wrapper .information .avatar {
    position: absolute;
    top: 23vw;
    left: 7vw;
}

.wrapper .information .avatar img {
    width: 22vw;
    height: 22vw;

    border-radius: 50%;
}

/*  用户数据部分  */
.wrapper .information .data .top {
    width: 50%;
    height: 12vw;

    display: flex;
}

.wrapper .information .data .top .fans {
    width: 60vw;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #999999;

    position: absolute;
    top: 32vw;
    right: 20vw;
}

.wrapper .information .data .top .fans .count {
    font-size: 5vw;

    color: black;
}

.wrapper .information .data .top .v-line1 {
    width: 5vw;

    border-left: 0.2vw solid #999999;
    height: 5vw;

    position: absolute;
    top: 35vw;
    right: 34vw;
}

.wrapper .information .data .top .attention {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: #999999;

    position: absolute;
    top: 32vw;
    right: 23vw;
}

.wrapper .information .data .top .attention .count {
    font-size: 5vw;

    color: black;
}

.wrapper .information .data .top .v-line2 {
    width: 5vw;

    border-left: 0.2vw solid #999999;
    height: 5vw;

    position: absolute;
    top: 35vw;
    right: 11vw;
}

.wrapper .information .data .top .zan {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: #999999;

    position: absolute;
    top: 32.1vw;
    right: 2vw;
}

.wrapper .information .data .top .zan .count {
    font-size: 5vw;

    color: black;
}

.wrapper .information .data .bottom {
    width: 55vw;
    height: 8vw;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 0.2vw solid hotpink;

    position: absolute;
    top: 45vw;
    right: 2vw;

    color: hotpink;
}

/*  详细信息  */
.wrapper .detail {
    width: 100%;
    height: 34vw;

    margin-top: 10vw;

    margin-left: 2vw;
}

.wrapper .detail .name {
    width: 100%;

    display: flex;
    align-items: center;

    font-size: 5vw;
}

.wrapper .detail .name .huiyuan {
    width: 15vw;
    height: 5vw;

    background-color: #999999;

    display: flex;
    justify-content: center;
    align-content: center;

    margin-left: 3vw;
    margin-top: 1.5vw;

    border-radius: 5vw;

    font-size: 3.5vw;
    font-weight: bold;
    color: #ffffff;

}

.wrapper .detail .level {
    font-size: 3.5vw;
    color: #999999;

    margin-top: 3vw;
}

.wrapper .detail .level img {
    width: 7vw;
    height: 4vw;

    margin-right: 2vw;
}

.wrapper .detail .g-container {
    width: 33vw;
    height: 0.7vw;

    border-radius: 10vw;

    background-color: #606060;
}

.wrapper .detail .g-container .g-progress {
    width: 82%;
    height: inherit;
    border-radius: 10vw;
    background-color: #FF7F24;
}

.wrapper .detail .introduce {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 3.5vw;

    margin-top: 3vw;
}

.wrapper .detail .introduce .left {
    color: #999999;
}

.wrapper .detail .introduce .right {
    color: #3399FF;

    margin-right: 5vw;
}

.wrapper .detail .ip {
    display: flex;
    align-items: center;

    margin-top: 2vw;

    font-size: 3vw;
    color: #999999;
}

.wrapper .detail .ip img {
    width: 5vw;
    height: 5vw;

    margin-right: 1vw;

}

/*  分割线  */
.wrapper .line {
    width: 100%;
    height: 0.3vw;

    background-color: #E0E0E0;
}

/* 功能列表部分 */
.wrapper .function {
    width: 100%;
    height: 10vw;

    display: flex;
    align-items: center;

    padding-left: 3vw;

    color: dimgrey;
    background-color: white;
}

.wrapper .function .current {
    width: 25vw;
    height: 10vw;

    margin-top: 3vw;

    color: hotpink;
}

.wrapper .function div {
    font-size: 4.5vw;
    width: 25vw;
}

.wrapper .function .current .horizontal-line {
    width: 10vw;
    border-bottom: 1vw solid hotpink;
    margin-top: 1.2vw;
}